<template>
    <div style="height: 100%;">
        <!-- <basic-layout title="预约拜访" :showAddBtn="false"> -->
        <div class="columnBg">
            <van-form ref="form">
                <!-- <van-field v-model="appText" required readonly label="申请单号：" /> -->

                <van-field v-model="formData.applnt" required readonly label="申请人：" placeholder="申请人"
                    :rules="rules.applnt" />

                <van-field v-model="formData.appDeptPathname" readonly label="申请人部门：" placeholder="申请人部门"
                    :rules="rules.appDeptPathname" />

                <van-field v-model="formData.appTime" autocomplete="off" required readonly name="申请时间" label="申请时间："
                    placeholder="申请时间" :rules="rules.appTime" />

                <van-field v-model="formData.applntPhone" autocomplete="off" clearable required maxlength="11" label="联系方式："
                    placeholder="联系方式" :rules="rules.applntPhone" />

                <van-field v-model="formData.appReason" rows="1" name="申请原因" label="申请原因：" required placeholder="请输入申请原因"
                    show-word-limit :rules="rules.appReason" />
            </van-form>
            <div class="followerBox">
                <h5 @click="isFold = !isFold;">
                    办公用品列表（{{ listData.length }}）
                    <p v-if=" isFold ">展开 <van-icon name="arrow-down" /></p>
                    <p v-else>折叠 <van-icon name="arrow-up" /></p>
                    <van-button size="mini" round type="info" icon="plus" @click=" handleAdd "></van-button>
                </h5>
                <div v-show=" !isFold " class="list">
                    <div v-for="(val, ind) in listData  " :key= ind  class="list-item">
                        <div class="right">
                            <div class="iconClose">
                                <van-icon name="close" size="18" color="#ee0a24" @click=" handleDelete(val, ind) " />
                            </div>
                            <!-- <van-button plain color="#ee0a24" @click="handleDelete(ind)">删除</van-button> -->
                            <div style="display: flex;justify-content: space-between;">
                                <div>
                                    <van-image class="photo" width="70" height="70" :src=" val.photoUrl " />
                                    <div class="con">
                                        <p>
                                            <span class="label">品名：</span>
                                            {{ val.prodName || "-" }}
                                        </p>
                                        <p>
                                            <span class="label">型号：</span>
                                            {{ val.model }}
                                        </p>
                                        <p>
                                            <span class="label">单价：</span>
                                            ￥***/{{ val.unitName }}
                                        </p>
                                    </div>
                                </div>
                                <div style="display: flex;align-items: flex-end;">
                                    <van-stepper class="van-stepper" v-model=" val.appAmount " input-width="40px" min="0"
                                        :max=" val.stockAmount " integer />
                                </div>
                            </div>
                        </div>

                    </div>
                    <van-empty v-if=" !listData.length " class="custom-image"
                        :image=" require('../../../../assets/images/empty.png') " description="暂无办公用品" />
                </div>
            </div>
            <van-button class="defaultBtn" size="large" color="#4eb3e9" style="margin: 15px auto; " @click=" handleSubmit ">提交</van-button>
        </div>
        <fullscreenModal :modal=" fullscreenModal " :editType=" 'other' " label="选择办公用品" :showSubmit=" false "
            :showSave=" false " @handleClose=" fullscreenModal = false ">
            <article-form @close=" fullscreenModal = false " ref="articleForm" @restLsit=" restLsit " @addList=" addList "
                @goBack=" fullscreenModal = false " />
        </fullscreenModal>
    </div>
</template>

<script>
import { queryDic } from '@/api/common';
import { add } from "@/api/srvAssurance/officearticles/apply/apply";
import articleForm from "./articleForm.vue";
export default {
    components: { articleForm },
    data() {
        return {
            removeLsit: [],
            fullscreenModal: false,
            isFold: true,
            appText: '系统自动生成编号！',//申请编号
            formData: {
                officeAppId: '',
                applnt: '',
                appDeptPathname: '',
                appTime: '',
                applntPhone: '',
                appReason: '',
            },
            rules: {
                applnt: [
                    { required: true, message: '请选择申请人', trigger: 'change' },
                ],
                appDeptPathname: [
                    { required: true, message: '请选择申请部门', trigger: 'change' },
                ],
                appTime: [
                    { required: true, message: '请选择申请时间', trigger: 'change' },
                ],
                applntPhone: [
                    { required: true, message: '请输入申请人电话', trigger: 'change' },
                    {
                        // pattern: this.$commonReg.phoneReg,
                        // message: this.$commonReg.phoneMsg,
                        trigger: 'blur',
                    },
                ],
                appReason: [
                    { required: true, message: '请输入申请原因', trigger: 'change' },
                ]

            },
            listData: [], // 随行人员列表
            visitReasonList: [], // 拜访事由
            tagColor: ['#4eb3e9', '#07c160', '#ff976a', '#7232dd'],
            centerList: [],
            centerConfig: {
                entourageNum: '', // 随行人员数量
                limitNum: '', // 访问次数
                advanceReservationDay: '', // 可提前预约天数
                continuousReservationMaxday: '', // 连续预约最大天数
                beginTime: '', // 起始时间
                endTime: '', // 截止时间
                week: ''
            }
        };
    },
    created() {
        this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
        this.getDicData();
        this.setappUserInfo();
    },
    methods: {
        restLsit(val) {
            this.listData = val
        },
        addList(val) {
            this.listData = val
        },
        //设置默认信息
        setappUserInfo() {
            this.getDicData();
            let date = new Date();
            let min = "";
            if (date.getMinutes() < 10) {
                min = "0" + date.getMinutes();
            } else {
                min = date.getMinutes();
            }
            this.formData.appTime = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + min;
            this.formData.applnt = this.userInfo["name"]
            this.formData.appDeptPathname = this.userInfo["deptName"]
        },
        // 提交
        handleSubmit() {
            this.$refs.form.validate().then(() => {
                let isBoo = false
                if (this.listData.length < 1) {
                    this.$Notify({ type: 'warning', message: "申请办公用品不能为空！" });
                    isBoo = true;
                    return
                }
                this.listData.forEach(item => {
                    if (item.appAmount > item.stockAmount) {
                        this.$Notify({ type: 'warning', message: "申请数量不能大于库存数量！" });
                        isBoo = true;
                    } else if (item.appAmount == "0" || item.appAmount == null) {
                        this.$Notify({ type: 'warning', message: "申请数量不能为0！" });
                        isBoo = true;
                    }
                })
                if (isBoo) {
                    return
                };
                let resData = {
                    officeAppId: this.formData.officeAppId,
                    applnt: this.formData.applnt,
                    appDeptPathname: this.formData.deptName,
                    appTime: this.formData.appTime,
                    applntPhone: this.formData.applntPhone,
                    appReason: this.formData.appReason,
                    officeAppDetailSaveDTOS: this.listData
                };
                add(resData).then(res => {
                    if (res.code == "1000") {
                        this.$Notify({ type: "success", message: "保存成功！" });
                        this.$emit("close");
                        this.$emit("refresh");
                    } else {
                        this.$Notify({ type: "danger", message: res.data.msg });
                    }
                })
            })
        },
        // 添加
        handleAdd(e) {
            this.fullscreenModal = true;
            this.$refs.articleForm.initSelect();
            this.$refs.articleForm.removeLsit = this.listData;
            this.$refs.articleForm.resetForm();
            this.$refs.articleForm.getSearch();
        },
        // 删除
        handleDelete(index) {
            this.listData.splice(index, 1);
        },
        // 重置
        resetForm() {
            this.isFold = true;
            this.formData = {
                epidMaterialAppId: '',
                appNo: '',//申请编号
                applnt: '',
                appDeptPathname: '',
                appTime: '',
                applntPhone: '',
                appReason: '',
            };
            this.listData = [];
            this.setappUserInfo();
            setTimeout(() => {
                this.$refs.form.resetValidation();
            })
        },
        getDicData() {
            //获取办公用品单位
            queryDic('SA_UNIT_CODE').then(res => {
                if (res.code == 1000) {
                    this.officeUnitCodeList = res.data
                }
            })
        }
    },
};
</script>

<style scoped lang="less">
.columnFlex {
    overflow: auto;
    background: #eee;
}

.van-form {
    background: #fff;

    .photoRow {
        display: flex;
        align-items: center;
        padding: 8px 15px 0;
        box-sizing: border-box;
        justify-content: space-between;
        position: relative;

        .left {
            line-height: 25px;

            p:nth-of-type(2) {
                color: #999;
                font-size: 12px;
            }
        }
    }

    .photoRow::after {
        position: absolute;
        box-sizing: border-box;
        content: " ";
        pointer-events: none;
        right: 0.42667rem;
        bottom: 0;
        left: 0.42667rem;
        border-bottom: 0.02667rem solid #ebedf0;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }

    /deep/.van-field__button a {
        color: #4eb3e9;
        font-size: 13px;
    }

    .van-tag {
        margin-right: 10px;
        line-height: 22px;
        padding: 0 8px;
    }
}

h5 {
    background: #f1f1f2;
    font-size: 13px;
    line-height: 42px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    font-weight: normal;
    color: #666;
    position: relative;

    /deep/.van-button--mini {
        padding: 0;
        width: 18px;
        height: 18px;
    }

    p {
        position: absolute;
        right: 45px;
    }
}

.followerBox {
    background: #fff;
    margin-top: 5px;

    h5 {
        background: #fff;
    }

    /deep/.van-empty {
        padding: 20px 0;

        .van-empty__image {
            width: 50px;
            height: 50px;
        }
    }

    .list-item {
        display: flex;
        padding: 10px;
        box-sizing: border-box;
        align-items: center;
        border-bottom: 1px solid #eee;

        img {
            width: 60px;
            height: 60px;
            margin-right: 10px;
        }

        .right {
            flex: 1;
            overflow: hidden;

            .photo {
                float: left;
            }

            .con {
                margin-left: 10px;
                float: right;
                padding-left: 1px;

                p {
                    line-height: 20px;
                    font-size: 12px;
                    flex: 1;
                }
            }

            .van-stepper {
                float: right;
            }

            // div {
            //     display: flex;
            //     line-height: 20px;
            //     align-items: center;
            //     font-size: 12px;

            //     label {
            //         color: #999;
            //     }

            //     p {
            //         flex: 1;
            //         overflow: hidden;
            //         text-overflow: ellipsis;
            //         white-space: nowrap;
            //     }
            // }

            .iconClose {
                float: right;
            }
        }

        .van-button {
            height: 25px;
            padding: 0 10px;
            font-size: 12px;
        }
    }
}
</style>